<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition>
		<div align="center">
			<h:form>
				<h:outputText value="Ranking"
					style="font-size: 18px; color: #eeeeee" />
				<br />
				<p:commandButton id="btn" value="Nacional" type="button"
								 style="width: 150px;" />
				<p:menu position="dynamic" trigger="btn" my="top" at="bottom"
						type="sliding" backLabel="Voltar">
					<p:submenu label="Estadual">
						<p:menuitem value="Acre" url="http://www.google.com" />
						<p:menuitem value="Alagoas" url="http://www.google.com" />
						<p:menuitem value="Amapá" url="http://www.google.com" />
						<p:menuitem value="Amazonas" url="http://www.google.com" />
						<p:menuitem value="Bahia" url="http://www.google.com" />
						<p:menuitem value="Ceará" url="http://www.google.com" />
						<p:menuitem value="Distrito Federal" url="http://www.google.com" />
						<p:menuitem value="Espírito Santo" url="http://www.google.com" />
						<p:menuitem value="Goiás" url="http://www.google.com" />
						<p:menuitem value="Mato Grosso" url="http://www.google.com" />
						<p:menuitem value="Mato Grosso do Sul" url="http://www.google.com" />
						<p:menuitem value="Maranhão" url="http://www.google.com" />
						<p:menuitem value="Minas Gerais" url="http://www.google.com" />
						<p:menuitem value="Pará" url="http://www.google.com" />
						<p:menuitem value="Paraná" url="http://www.google.com" />
						<p:menuitem value="Pernambuco" url="http://www.google.com" />
						<p:menuitem value="Piauí" url="http://www.google.com" />
						<p:menuitem value="São Paulo" url="http://www.google.com" />
						<p:menuitem value="Santa Catarina" url="http://www.google.com" />
						<p:menuitem value="Sergipe" url="http://www.google.com" />
						<p:menuitem value="Rio de Janeiro" url="http://www.google.com" />
						<p:menuitem value="Rio Grande do Norte"	url="http://www.google.com" />
						<p:menuitem value="Rio Grande do Sul" url="http://www.google.com" />
						<p:menuitem value="Rondônia" url="http://www.google.com" />
						<p:menuitem value="Roraima" url="http://www.google.com" />
						<p:menuitem value="Tocantins" />
					</p:submenu>
					<p:submenu label="Municipal">
						<p:submenu label="Tocantins">
							<p:menuitem value="Ananás" />
							<p:menuitem value="Araguaína" />
							<p:menuitem value="Palmas" />
						</p:submenu>
					</p:submenu>
				</p:menu>
				<p:panel style="width: 190px; border: hidden; background: none">

					<!-- 		    			<div class="title"> -->
					<!-- 		    				<h:outputText value="Ranking"></h:outputText> -->
					<!-- 		    			</div> -->
					<h:panelGrid columns="2">

						<h:outputText value="1º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="2º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="3º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="4º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="5º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="6º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="7º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="8º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="9º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="10º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="11º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="12º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="13º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="14º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="15º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="1º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="2º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="3º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="4º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="5º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="6º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="7º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="8º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="9º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="10º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="11º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="12º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="13º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="14º" />
						<h:outputText value="Atrasador" />
						<h:outputText value="15º" />
						<h:outputText value="Atrasador" />

					</h:panelGrid>
				</p:panel>
			</h:form>
		</div>
	</ui:composition>
</body>
</html>

